import React, { Component } from 'react';
import { connect } from 'dva';
import { Form, Button, Card, Input } from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';

const FormItem = Form.Item;

@connect()
class Add extends Component {

	submitHandler = e => {
		e.preventDefault();
		this.props.form.validateFieldsAndScroll((err, values) => {
			if (!err) {
				this.props.dispatch({
					type: 'articles/addArticle',
					payload: values
				})
			}
		});
	};

    render() {
		const { getFieldDecorator: gtd } = this.props.form;
		const itemLayout = {
			labelCol: {
				xs: {span: 24},
				sm: {span: 7}
			},
			wrapperCol: {
				xs: {span: 24},
				sm: {span: 17},
				
			}
		}
        return (
            <PageHeaderLayout
                title="Add articles"
                //content="123"
            >
                <Card bordered={false}>
					<Form onSubmit={this.submitHandler}>
						<FormItem {...itemLayout} label="Title">
							{
								gtd("Title", {
									rules: [
										{
											required: true,
											message: 'Please input Title.'
										}
									]
								})(<Input/>)
							}
						</FormItem>
						<FormItem {...itemLayout} label="Content">
							{
								gtd("Content", {
									rules: [
										{
											required: true,
											message: 'Please input content.'
										},
										{
											min: 10,
											message: 'Least 10 words.'
										}
									]
								})(<Input.TextArea autosize={{minRows: 10}}/>)
							}
						</FormItem>
						<FormItem wrapperCol={{span: 8, offset: 7}}>
							<Button type="primary" size="large" htmlType="submit">
								Submit
							</Button>
						</FormItem>
					</Form>
                </Card>
            </PageHeaderLayout>
        )
    }
}

export default Form.create()(Add) 
